<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <!-- 数据列表 -->
    <div class="flex mt10">
      <el-card shadow="never" :body-style="{ padding: '10px 20px 10px' }" style="margin-right: 20px; flex: 1">
        <div slot="header" class="mb9 f16 flex btns">
          <span style="font-weight: 600">库存资料</span>
        </div>
        <Table
          :tableData="tableData"
          :tableHeader="tableHeader"
          :TableHeight="100"
          :outTableHeight="75"
          :isLoading="isLoading"
          @currentRow="currentRow"
          :summaryData="summaryData"
          summary
        />
        <!-- 分页器 -->
        <PageModule
          :PageData="{ total, pageSizeShow: true, buttonS: true }"
          :layout="'prev, pager'"
          @pageSizeChange="handleSizeChange"
          @pageChange="handleCurrentChange"
        />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '0' }">
        <el-card shadow="never" :body-style="{ padding: '10px 20px 0px' }">
          <div slot="header" class="mb9 f16 flex">
            <span style="font-weight: 600">入库单据明细</span>
          </div>
          <Table :tableData="tableData2" :tableHeader="tableHeader2" :TableHeight="50" :outTableHeight="75" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '10px 20px 10px' }">
          <div slot="header" class="mb9 f16 flex">
            <span style="font-weight: 600">出库单据明细</span>
          </div>
          <Table :tableData="tableData3" :tableHeader="tableHeader3" :TableHeight="50" :outTableHeight="75" />
        </el-card>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch, type Ref } from 'vue'

import Api from '@/api/GeneralManager/inquire/materials'
import type { formListType } from '@/components/Find/index.vue'
import fileRequest from '@/utils/fileRequest'
import { selectList } from '@/plugins/mixin'
import service from '@/utils/request'
import { debounce } from 'lodash'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'materials'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const tableData = ref([])
const mtlName = ref('') as string & Ref
const mtlColor = ref('') as string & Ref
const mtlUnit = ref('') as string & Ref
const startDate = ref('') as string & Ref
const endDate = ref('') as string & Ref
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 5,
    num: 0
  }
])
const isLoading = ref(false)
const getTableList = debounce(async () => {
  isLoading.value = true
  let TableList = await Api.getTableList({
    inStockEndTime: endDate.value, //入库结束日期
    inStockStartTime: startDate.value, //入库开始日期
    mtlColor: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
    )?.inputValue, //颜色
    mtlName: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材质'
    )?.inputValue, //材质
    mtlUnit: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入规格'
    )?.inputValue, //规格
    pageNum: currentPage.value, //	integer
    pageSize: pageSize.value, //	integer
    stock: 0, //0：全部 1：库存大于0	integer
    style: formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码')
      ?.selectValue?.split('  ')[1] //大类
  })
  tableData.value = TableList.list
  total.value = TableList.total
  summaryData.value[0].num = TableList.stocks
  currentRow()
  isLoading.value = false
}, 500)
// 获取 大类 中类 小类 下拉框数据
const getSelectList = async (mid: any = '', small: any = '') => {
  let res = await service.get<any, any>('/back/mtlTypeLMSQuery', {
    params: {
      mtlType: small ? small : mid
    }
  })
  formList.value
    .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码')
    ?.selectOptions.splice(0)
  res.forEach((item: any, index: any) => {
    formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码')
      ?.selectOptions?.push({
        optionKey: index,
        optionValue: `${item.typeName}  ${item.typeNo}`,
        optionLabel: `${item.typeName}`,
        LeftLabel: `${item.typeName}`,
        RightLabel: `${item.typeNo}`
      })
  })
}
onMounted(() => {
  getTableList()
  getSelectList()
})
const formList = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '大类名称 大类代码',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材质',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入规格',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '出入库日期',
    dateValue: ''
  },
  {
    type: 'radio1',
    checkboxLabel: '库存>0',
    label: '1'
  },
  {
    type: 'radio1',
    checkboxLabel: '全部',
    label: '0'
  },
  {
    type: 'radio',
    checkboxLabel: '公用',
    checked: '1'
  },
  {
    type: 'radio',
    checkboxLabel: '非公用',
    checked: '2'
  },
  {
    type: 'radio',
    checkboxLabel: '全部',
    checked: '0'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
]) as any

// 表格数据
const tableHeader = ref([
  {
    width: '100px',
    label: '料号',
    prop: 'mtlNo'
  },
  {
    label: '材质',
    prop: 'mtlName',
    width: '250'
  },
  {
    label: '颜色',
    prop: 'mtlColor'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '库存数量',
    prop: 'stkQty'
  }
])
const tableHeader2 = ref([
  {
    label: '单据号',
    prop: 'slipNo',
    width: '150'
  },
  {
    label: '单据日期',
    prop: 'slipDate'
  },
  {
    label: '单据类型',
    prop: 'slipType'
  },
  {
    label: '入库数量',
    prop: 'inQty'
  },
  {
    label: '库存位置',
    prop: 'areaNo'
  },
  {
    label: '采购员',
    prop: 'cfmUser'
  }
])
const tableData2 = ref([])
const tableHeader3 = ref([
  {
    label: '单据号',
    prop: 'slipNo',
    width: '150'
  },
  {
    label: '单据日期',
    prop: 'slipDate'
  },
  {
    label: '单据类型',
    prop: 'slipType'
  },
  {
    label: '入库数量',
    prop: 'outQty'
  },
  {
    label: '库存位置',
    prop: 'areaNo'
  }
])
const tableData3 = ref([])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}

const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  // console.log(row);
  let { mtlNo } = row
  try {
    let { inStockMsg, outStockMsg } = await Api.getStockDetail(mtlNo)
    tableData2.value = inStockMsg.list
    tableData3.value = outStockMsg.list
  } catch (error) {
    console.log(error)
  }
}

// 监听查询
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 置空
const findClicked = async (content: string) => {
  if (content === '导出') {
    const res = (await fileRequest.post(`/stock/downloadMtlSto`, {
      inStockEndTime: endDate.value, //入库结束日期
      inStockStartTime: startDate.value, //入库开始日期
      mtlColor: mtlColor.value, //颜色
      mtlName: mtlName.value, //材质
      mtlUnit: mtlUnit.value, //规格
      pageNum: currentPage.value, //	integer
      pageSize: pageSize.value, //	integer
      stock: 0, //0：全部 1：库存大于0	integer
      style: '' //大类
    })) as any

    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    link.download = `${Date.now()}.xls` //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
      item.dateValue = ''
      item.checked = true
    })
    getTableList()
  }
}
</script>

<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: space-between;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}

// 底部
.bottom {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  margin-top: 40px;

  .total {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    font-family: PingFangSC-Regular-, PingFangSC-Regular;
    margin-right: 100px;
  }

  :deep(.el-input__wrapper) {
    padding: 0;
  }

  :deep(.el-input__suffix) {
    transform: translateX(-9px);
  }

  :deep(.el-pagination .el-select .el-input) {
    width: 88px;
  }

  :deep(.number) {
    border: 1px solid #dcdcdc;
    margin-right: 8px;
    border-radius: 3px 3px 3px 3px;
  }

  :deep(.is-active.number) {
    background-color: #f89027 !important;
    color: white;
    border-radius: 3px 3px 3px 3px;
  }

  .save {
    color: black;
    border: 1px solid #e7e7e7;
    background: #e7e7e7;
  }
}
</style>
